<template>
    <div class="BG">
        <div class="Login">
            <div class="Layout">
                <div class="title">
                    <img src="@/assets/logo.png" alt="">
                </div>
                <login_FormVue v-if="Stauts" @regist="Stauts = false" />
                <regist_FormVue v-if="!Stauts" @login="Stauts = true" />
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { nextTick, ref } from 'vue';
import login_FormVue from './login_Form.vue';
import regist_FormVue from './regist_Form.vue';
const Stauts = ref<Boolean>(true);




</script>
<style lang="less" scoped>
.BG {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;

    &::before {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        display: block;
        background-image: url(@/assets/bg.jpg);
        background-size: 120% auto;
        background-position: center center;
        opacity: 0.5;
        width: 100%;
        height: 100%;
    }
}

.Login {
    height: 100%;
    position: relative;

    .Layout {
        width: 320px;
        height: auto;
        position: absolute;
        background-color: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(5px);
        right: 13%;
        top: 50%;
        transform: translate(0, -50%);
        border-radius: 10px;
        padding: 30px 40px;
        box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
    }

    .title {
        font-weight: bold;
        font-size: 20px;
        opacity: 0.7;
        margin-left: -10px;
        padding-bottom: 10px;
    }

}
</style>